<template>
  <div>
    <van-nav-bar
      title="注册"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="reg">
      <img
        src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019pILfAg7Avr1567732916.png"
      />
      <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" color="#DF6211" plain @click="yanzheng"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <van-field v-model="text" placeholder="请输入账号" />
      <p>
        <span>*未注册的手机号将自动注册</span>
        <span>使用密码登录</span>
      </p>
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        block
        round
        @click="login"
      >
        立即登录
      </van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      sms: "",
      text: "",
    };
  },
  methods: {
    yanzheng() {
      this.$API.smsCode({ mobile: this.sms, sms_type: "login" }).then((res) => {
        console.log(res);
        Toast(res.data.msg);
      });
    },
    login() {
      this.$API
        .login({ mobile: this.sms, sms_code: this.text, type: 2 })
        .then((res) => {
          console.log(res);
          Toast(res.data.msg);
          if (res.data.code == 200) {
            localStorage.setItem("token", res.data.data.remember_token);
            this.$router.push({path:'/mine'})
          }
        });
    },
  },
};
</script>
<style lang="scss">
.reg {
  width: 80%;
  margin: 40px auto;
  img {
    width: 80%;
    display: block;
    margin: 60px auto 60px;
    font-size: 3.2vw;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999;
    justify-content: space-between;
    margin: 40px 0 60px;
  }
}
</style>